<template>
  <div class="app-container">
    <div class="banner">
      <Banner></Banner>
    </div>
    <div class="Filter" v-if="getRouter !== '/interview/index/1'">
      <AFilter :stateType="listQuery.stateType" @query="query"></AFilter>
    </div>
    <div class="main" :style="getRouter === '/interview/index/1' ? 'margin-top: 20px;' : ''">
      <el-table vloading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

        <el-table-column align="center" label="ID" width="80" show-overflow-tooltip prop="id">
        </el-table-column>

        <el-table-column align="center" label="姓名" show-overflow-tooltip prop="name">
        </el-table-column>

        <el-table-column align="center" label="联系方式" show-overflow-tooltip prop="mobile">
        </el-table-column>

        <el-table-column align="center" label="求职状态" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.jobStatus | jobStateFilter()}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="性别" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.sexId | sexFilter(sexData)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="年龄" show-overflow-tooltip prop="age">
        </el-table-column>

        <el-table-column align="center" label="学历" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.educationId | educationFilter(educationData)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="工作经验" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.workStart | workExperienceFilter}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="E力值" show-overflow-tooltip prop="ePower">
        </el-table-column>

        <el-table-column align="center" label="求职岗位" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.postId | postNameFilter(postTypeData)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="薪资要求" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{scope.row.salaryMin | salaryFilter(scope.row.salaryMax)}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="简历详情" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.resumeAttachmentUrl || '-'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="更新时间" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime | formatUpdateTime}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="状态标记" show-overflow-tooltip v-if="getRouter !== '/interview/index/3'">
          <template slot-scope="scope">
            <el-button type="primary" @click="switchState(scope.row.id)">{{jobStatus}}</el-button>
          </template>
        </el-table-column>

        <el-table-column align="center" label="状态标记" show-overflow-tooltip v-else>
          <template slot-scope="scope">
            <span>{{scope.row.state === '5' ? '合适' : '不合适'}}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="投递时间" v-if="routerId === 0" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 已面试选择弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        center
        append-to-body>
        <el-form ref="form" label-width="120px">
          <el-form-item label="面试结果：">
            <el-radio v-model="interviewIdState" label="5" border>合适</el-radio>
            <el-radio v-model="interviewIdState" label="-9" border>不合适</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="poupCancel">取 消</el-button>
          <el-button type="primary" @click="poupConfirm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div style="margin-top: 50px; text-align: center;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="listQuery.limit"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { search } from '@/api/web/interview'
  import Banner from './components/Banner'
  import AFilter from './components/Filter'

    export default {
      name: "Index",
      components:{Banner,AFilter},
      data(){
        return{
          interviewIdState: '',
          interviewId: '',
          dialogVisible: false,
          list: [],
          listLoading: false,
          listQuery: {
            pageNo: 1,
            limit: 20,
            stateType: '',
            postId: ''
          },
          routerId: null,
          jobStatusData: [],
          educationData: [],
          sexData: [],
          postTypeData: [],
          total: 0
        }
      },
      methods:{
        // 标记状态切换操作
        switchState (id) {
          // 请求参数
          let params = {
            interviewId: id
          }
          // 提示文本
          let tipText = ''

          if (this.getRouter === '/interview/index/2') {
            this.dialogVisible = true
            this.interviewId = id
          } else {
            if (this.getRouter === '/interview/index/0') {
              tipText = '确认将改人才标记为已沟通吗？'
              params.state = '3'
            } else if (this.getRouter === '/interview/index/1') {
              tipText = '确认将改人才标记为待面试吗？'
              params.state = '4'
            }
            this.$confirm(tipText, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$fetch(this.$api.upgradeStatus, params).then(res => {
                if (res.code === 0) {
                  this.$message.success('修改成功')
                  this.init()
                } else {
                  this.$message.error(res.msg)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
          }
        },
        poupCancel () {
          this.dialogVisible = false
          this.interviewIdState = ''
          this.interviewId = ''
        },
        poupConfirm () {
          if (this.interviewIdState.length === 0) {
            this.$message.warning('请选择面试结果')
          } else {
            let tipText = ''
            if (this.interviewIdState === '-9') {
              tipText = '确认将改人才标记为不合适吗？'
            } else {
              tipText = '确认将改人才标记为合适吗？'
            }
            let params = {
              interviewId: this.interviewId,
              state: this.interviewIdState
            }
            this.$confirm(tipText, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$fetch(this.$api.upgradeStatus, params).then(res => {
                if (res.code === 0) {
                  this.$message.success('修改成功')
                  this.dialogVisible = false
                  this.init()
                } else {
                  this.$message.error(res.msg)
                }
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              });          
            });
          }
        },
        init(){
          // 已投递 delivered  已沟通 communicated  待面试 toBeInterviewed   已面试 interviewed
          if (this.$route.meta.id === 0) {
            this.listQuery.stateType = 'delivered'
          } else if (this.$route.meta.id === 1) {
            this.listQuery.stateType = 'communicated'
          } else if (this.$route.meta.id === 2) {
            this.listQuery.stateType = 'toBeInterviewed'
          } else if (this.$route.meta.id === 3) {
            this.listQuery.stateType = 'interviewed'
          }
          this.routerId = this.$route.meta.id
          // TODO 请求
          this.$fetch(this.$api.search, this.listQuery).then(res => {
            console.log(res)
            this.total = res.page.total
            this.list = res.page.records
          })
        },
        currentChange (el) {
          this.listQuery.pageNo = el
          this.init()
        },
        query (el) {
          this.listQuery.postId = el
          this.listQuery.pageNo = 1
          this.init()
        }
      },
      created(){
        this.init()
        this.$fetch(this.$api.sex).then(res => { // 请求性别数据
          this.sexData = res.data
        })
        this.$fetch(this.$api.education).then(res => { // 请求学历数据
          this.educationData = res.data
        })
        this.$fetch(this.$api.postType).then(res => { // 请求岗位类别数据
          this.postTypeData = res.data
        })
      },
      computed: {
        getRouter () {
          return this.$route.path
        },
        jobStatus () {
          if (this.getRouter === '/interview/index/0') {
            return '已沟通'
          } else if (this.getRouter === '/interview/index/1') {
            return '待面试'
          } else if (this.getRouter === '/interview/index/2') {
            return '已面试'
          } else {
            return '-'
          }
        }
      },
      watch: {
        '$route'(to, from) {
          this.init()
        }
      }
    }
</script>

<style scoped>
.Filter{
  margin-top: 20px;
}
</style>
